<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0 ;
				padding: 0;;
			}
			.zhu{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid black;
			}
			canvas{
				border: 1px dashed blue;
				width: 500px;
				height: 500px;
			}
			
		</style>
	</head>
	<body>
		<div class="zhu">	
			<canvas id="canvasone" width="500" height="500"></canvas>
			<p id="num">5</p>
			<input type="button" value="补充子弹" onclick="zj();"/> 
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let oneCanvas=document.getElementById('canvasone');
			let ppen=oneCanvas.getContext('2d');
			
			ppen.fillRect(0,100,100,100);
			
				var canvasWidth=canvasone.width;
				var flag=false;
				var x=0;
				var zx=100+x;
					console.log(x);
				function move(a,b){					
				ppen.clearRect(zx-1,125,25,25);
				ppen.translate(a,b);
				ppen.fillRect(zx,125,25,25);
					if(canvasWidth-125-x<=-25){						
						zx=100;						
					}
					console.log('x='+x);
			}
				
				document.onkeypress=function(e){
					flag=true;
							
				let	dingshiqi=setInterval(function(){
						console.log(flag);
						if(flag){
							if(canvasWidth-125-x>-25){
							move(1,0);
							x++;
							console.log(x);
							}					
							else{								
								flag=false;																
								p.innerHTML--;
								clearInterval(dingshiqi);
							}
						}						
						else {
							flag=true;
							return
						}
												
					},10)
					
				}

				
				
			var p = document.getElementById('num');
				zj=function(){					
                	p.innerHTML++;
				}
			
		 }	
	</script>
</html>
